<template>
    <div class="zs-table-page-container">
        <div class="zs-card zs-table-page-content">
            <el-auto-resizer>
                <template #default="{ height, width }">
                    <el-table-v2 :default-expanded-row-keys="expandedRowKeys" :expand-column-key="expandColumnKey"
                        v-loading="tableData.loading" class="zs-el-table-v2" :row-height="36" :header-height="72"
                        :row-class="tableData.rowClass" header-class="zs-el-table-v2-header" :columns="tableData.cloumns"
                        :data="tableData.data" :width="width" :height="height" fixed>
                        <template #header="props">
                            <CustomizedHeader v-bind="props" />
                        </template>
                    </el-table-v2>
                </template>
            </el-auto-resizer>
        </div>
    </div>
</template>
<script setup lang="jsx">
import { ref, reactive } from 'vue'
// 表格数据
// let tableEmpty = "-";
let expandedRowKeys = ref()
const expandColumnKey = 'aa'
let tableData = reactive({
    loading: false,
    data: [],
    total: 0,
    cloumns: [
        {
            key: "aa",
            dataKey: "aa",
            title: "编号",
            align: "left",
            width: 250,
        },
        {
            key: "bb",
            dataKey: "bb",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "cc",
            dataKey: "cc",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "dd",
            dataKey: "dd",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "ee",
            dataKey: "ee",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "ff",
            dataKey: "ff",
            title: "编号",
            align: "left",
            width: 250,
        },
        {
            key: "gg",
            dataKey: "gg",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "hh",
            dataKey: "hh",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "ii",
            dataKey: "ii",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "jj",
            dataKey: "jj",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "jj",
            dataKey: "jj",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "jj",
            dataKey: "jj",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "jj",
            dataKey: "jj",
            title: "科目税率",
            align: "right",
            width: 250,
        },
        {
            key: "jj",
            dataKey: "jj",
            title: "科目税率",
            align: "right",
            width: 250,
        },
    ],
    rowClass: ({ rowData }) => {
        if ((rowData.curParentIndex + 1) % 2 == 0) {
            return "zs-el-table-row-gray";
        }
    },
});


tableData.data = [
    { id: 1, aa: 100, bb: 3, cc: 3, dd: 3, ee: 3, ff: 1, gg: 3, hh: 3, ii: 3, jj: 3, curParentIndex: 0, children: [{ id: 11, aa: 11, bb: 33, cc: 3, dd: 3, ee: 3, ff: 1, gg: 3, hh: 3, ii: 3, jj: 3, curParentIndex: 0 }] },
    { id: 2, aa: 200, bb: 4, cc: 3, dd: 3, ee: 3, ff: 1, gg: 3, hh: 3, ii: 3, jj: 3, curParentIndex: 1, children: [{ id: 22, aa: 22, bb: 44, cc: 3, dd: 3, ee: 3, ff: 1, gg: 3, hh: 3, ii: 3, jj: 3, curParentIndex: 1 }] }
]

expandedRowKeys.value = [1, 2]

const CustomizedHeader = ({ cells, columns, headerIndex }) => { 
    console.log(headerIndex)
    const groupCells = [];
    for (let i = 0, len = columns.length; i < len; i++) {
         if (i === 2) { 
            const width = cells[i].props.column.width + cells[i + 1].props.column.width + 2;
            groupCells.push(
                <div style = {{ width: `${width}px`, borderLeft: '1px solid #ffffff', borderRight: '1px solid #ffffff', }}>
                    <div style = {{ width: `${width -1}px`, height: '36px', background: '#f5f4f5', textAlign: 'center', borderRight: '1px solid #ffffff',  }}>Group</div>
                    <div style="display:flex; height: 36px">{cells[i]}{cells[i+1]}</div>
                </div >)
            i++
        } 
        else { groupCells.push(cells[i]) } 
    }
    return groupCells;
}

</script>
  
  
<style scoped lang="scss"></style>